<template>
  <div class="song_list">
    <SongListHeader :btnText="btnText" :title="title" v-on="$listeners" />
    <div class="list_wrap flex-content">
      <SongListItem
        v-for="item in list"
        :key="item.id"
        class="item"
        :playCount="item.playCount"
        :name="item.name"
        :pic="item.pic"
        :type="item.type"
      />
    </div>
  </div>
</template>

<script>
//components
import SongListItem from "./SongListItem";
import SongListHeader from "./SongListHeader";
/**
 * @events btnClick 点击右边按钮回调
 * @events titleClick 点击左边title的回调，返回当前title索引
 */
export default {
  props: {
    title: {
      type: Array,
      default: [] //text:标题，handle:标题点击事件返回点击的title,active:当前高亮的标题
    },
    list: {
      type: Array, //歌单列表
      default:()=>[]
    },
    btnText:String,  //右边按钮文字
   },
  components: {
    SongListItem,
    SongListHeader
  }
};
</script>
<style lang="scss" scoped>
.song_list {
  overflow: hidden;
}
.list_wrap {
  width: 110%;
}
.item {
  width: 105px;
  margin-right: 15px;
  margin-top: 5px;
  margin-bottom: 15px;
}
</style>